import { useState, useEffect } from "react";

// 自定义 Hook
function useFullScreen() {
  const [isFullScreen, setIsFullScreen] = useState(false);

  // 检测全屏状态
  const checkFullScreen = () => {
    setIsFullScreen(!!document.fullscreenElement);
  };

  // 切换全屏
  const toggleFullScreen = () => {
    if (isFullScreen) {
      // 退出全屏
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitExitFullscreen) {
        // Safari
        document.webkitExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        // Firefox
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        // IE/Edge
        document.msExitFullscreen();
      }
    } else {
      // 进入全屏
      const element = document.documentElement; // 或者选择特定的元素
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        // Safari
        element.webkitRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        // Firefox
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        // IE/Edge
        element.msRequestFullscreen();
      }
    }
  };

  // 监听全屏状态变化
  useEffect(() => {
    document.addEventListener("fullscreenchange", checkFullScreen);
    document.addEventListener("webkitfullscreenchange", checkFullScreen); // Safari
    document.addEventListener("mozfullscreenchange", checkFullScreen); // Firefox
    document.addEventListener("MSFullscreenChange", checkFullScreen); // IE/Edge

    return () => {
      document.removeEventListener("fullscreenchange", checkFullScreen);
      document.removeEventListener("webkitfullscreenchange", checkFullScreen);
      document.removeEventListener("mozfullscreenchange", checkFullScreen);
      document.removeEventListener("MSFullscreenChange", checkFullScreen);
    };
  }, []);

  return {
    isFullScreen,
    toggleFullScreen
  };
}

export default useFullScreen;
